<template>
    <view class="u-keyboard" @touchmove.stop.prevent="() => {}">
        <view class="u-keyboard-grids">
            <block>
                <view v-for="(group, i) in abc ? EngKeyBoardList : areaList" :key="i" class="u-keyboard-grids-item">
                    <view v-for="(item, j) in group" :key="j" :hover-stay-time="100"
                          class="u-keyboard-grids-btn"
                          hover-class="u-carinput-hover" @tap="carInputClick(i, j)">
                        {{ item }}
                    </view>
                </view>
                <view :hover-stay-time="100" class="u-keyboard-back" hover-class="u-hover-class" @touchend="clearTimer"
                      @touchstart="backspaceClick">
                    <u-icon :bold="true" :size="38" name="backspace"></u-icon>
                </view>
                <view :hover-stay-time="100" class="u-keyboard-change" hover-class="u-carinput-hover"
                      @tap="changeCarInputMode">
                    <text :class="[!abc ? 'active' : 'inactive']" class="zh">中</text>
                    /
                    <text :class="[abc ? 'active' : 'inactive']" class="en">英</text>
                </view>
            </block>
        </view>
    </view>
</template>

<script>
export default {
    name: "u-keyboard",
    props: {
        // 是否打乱键盘按键的顺序
        random: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            // 车牌输入时，abc=true为输入车牌号码，bac=false为输入省份中文简称
            abc: false
        };
    },
    computed: {
        areaList() {
            let data = [
                '京',
                '沪',
                '粤',
                '津',
                '冀',
                '豫',
                '云',
                '辽',
                '黑',
                '湘',
                '皖',
                '鲁',
                '苏',
                '浙',
                '赣',
                '鄂',
                '桂',
                '甘',
                '晋',
                '陕',
                '蒙',
                '吉',
                '闽',
                '贵',
                '渝',
                '川',
                '青',
                '琼',
                '宁',
                '挂',
                '藏',
                '港',
                '澳',
                '新',
                '使',
                '学'
            ];
            let tmp = [];
            // 打乱顺序
            if (this.random) data = this.$u.randomArray(data);
            // 切割成二维数组
            tmp[0] = data.slice(0, 10);
            tmp[1] = data.slice(10, 20);
            tmp[2] = data.slice(20, 30);
            tmp[3] = data.slice(30, 36);
            return tmp;
        },
        EngKeyBoardList() {
            let data = [
                1,
                2,
                3,
                4,
                5,
                6,
                7,
                8,
                9,
                0,
                'Q',
                'W',
                'E',
                'R',
                'T',
                'Y',
                'U',
                'I',
                'O',
                'P',
                'A',
                'S',
                'D',
                'F',
                'G',
                'H',
                'J',
                'K',
                'L',
                'Z',
                'X',
                'C',
                'V',
                'B',
                'N',
                'M'
            ];
            let tmp = [];
            if (this.random) data = this.$u.randomArray(data);
            tmp[0] = data.slice(0, 10);
            tmp[1] = data.slice(10, 20);
            tmp[2] = data.slice(20, 30);
            tmp[3] = data.slice(30, 36);
            return tmp;
        }
    },
    methods: {
        // 点击键盘按钮
        carInputClick(i, j) {
            let value = '';
            // 不同模式，获取不同数组的值
            if (this.abc) value = this.EngKeyBoardList[i][j];
            else value = this.areaList[i][j];
            this.$emit('change', value);
        },
        // 修改汽车牌键盘的输入模式，中文|英文
        changeCarInputMode() {
            this.abc = !this.abc;
        },
        // 点击退格键
        backspaceClick() {
            this.$emit('backspace');
            clearInterval(this.timer); //再次清空定时器，防止重复注册定时器
            this.timer = null;
            this.timer = setInterval(() => {
                this.$emit('backspace');
            }, 250);
        },
        clearTimer() {
            clearInterval(this.timer);
            this.timer = null;
        },
    }
};
</script>

<style lang="scss" scoped>
@import "../../libs/css/style.components.scss";

.u-keyboard-grids {
    background: rgb(215, 215, 217);
    padding: 24 rpx 0;
    position: relative;
}

.u-keyboard-grids-item {
    @include vue-flex;
    align-items: center;
    justify-content: center;
}

.u-keyboard-grids-btn {
    text-decoration: none;
    width: 62 rpx;
    flex: 0 0 64 rpx;
    height: 80 rpx;
    /* #ifndef APP-NVUE */
    display: inline-flex;
    /* #endif */
    font-size: 36 rpx;
    text-align: center;
    line-height: 80 rpx;
    background-color: #fff;
    margin: 8 rpx 5 rpx;
    border-radius: 8 rpx;
    box-shadow: 0 2 rpx 0 rpx #888992;
    font-weight: 500;
    justify-content: center;
}

.u-carinput-hover {
    background-color: rgb(185, 188, 195) !important;
}

.u-keyboard-back {
    position: absolute;
    width: 96 rpx;
    right: 22 rpx;
    bottom: 32 rpx;
    height: 80 rpx;
    background-color: rgb(185, 188, 195);
    @include vue-flex;
    align-items: center;
    border-radius: 8 rpx;
    justify-content: center;
    box-shadow: 0 2 rpx 0 rpx #888992;
}

.u-keyboard-change {
    font-size: 24 rpx;
    box-shadow: 0 2 rpx 0 rpx #888992;
    position: absolute;
    width: 96 rpx;
    left: 22 rpx;
    line-height: 1;
    bottom: 32 rpx;
    height: 80 rpx;
    background-color: #ffffff;
    @include vue-flex;
    align-items: center;
    border-radius: 8 rpx;
    justify-content: center;
}

.u-keyboard-change .inactive.zh {
    transform: scale(0.85) translateY(-10rpx);
}

.u-keyboard-change .inactive.en {
    transform: scale(0.85) translateY(10 rpx);
}

.u-keyboard-change .active {
    color: rgb(237, 112, 64);
    font-size: 30 rpx;
}

.u-keyboard-change .zh {
    transform: translateY(-10rpx);
}

.u-keyboard-change .en {
    transform: translateY(10 rpx);
}
</style>
